<!-- 添加修改地址 -->
<template>
	<view class="address-wrap">
		<!-- #ifdef MP-WEIXIN -->
			<shopro-login-modal></shopro-login-modal>
		<!-- #endif -->
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<!-- 地址定位 -->
			<!-- <view class="location-item u-flex u-row-between u-p-20 u-m-b-20" @tap="getLocation">
				<view class="u-flex">
					<u-icon name="map" size="28" color="#a76f0d"></u-icon>
					<text>{{ chooseAddress }}</text>
				</view>
				<u-icon name="arrow-right" size="28" color="#666"></u-icon>
			</view> -->

			<view class="address-box">
				<!-- 地址表单 -->
				<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="收货人:"
					prop="name">
					<u-input placeholder="请填写收货人姓名" v-model="model.name" type="text"></u-input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="手机号:"
					prop="mobile">
					<u-input placeholder="请输入收货人手机号" v-model="model.mobile" type="number"></u-input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" label-width="150" label-position="left" label="所在地区:">
						<u-input  type="select" v-model="model.provinceText"  placeholder="请选择省"
							@click="showProvince = true" style="margin-right: 10rpx;">
						</u-input>
						
						<u-input type="select"  v-model="model.cityText"  placeholder="请选择市"
							@click="showCity = true" style="margin-right: 10rpx;">
						</u-input>
						
						<u-input type="select" v-model="model.areaText"  placeholder="请选择区"
							@click="showArea = true" style="margin-right: 10rpx;"></u-input>
				</u-form-item>
				<u-form-item :labelStyle="labelStyle" label-position="left" label-width="150" label="详细地址:"
					prop="address">
					<u-input border type="textarea" v-model="model.address" placeholder="如道路、门牌号、小区、楼栋号、单元室等" />
				</u-form-item>
			</view>

			<!-- 设置默认 -->
			<view class="default-box u-flex u-row-between">
				<text class="title">设为默认地址</text>
				<u-switch v-model="model.isdefault" activeColor="#fe5e10" size="40" active-value="1" inactive-value="0">
				</u-switch>
			</view>

			<!-- 功能按钮 -->
			<view class="foot_box u-p-30 u-m-t-50 u-flex u-row-around">
				<button style="background-color: #FF0000;" v-show="addressId" class=" u-m-20 u-reset-button delete-btn u-flex-1"
					@tap="deleteAddress">删除</button>
				<button  class=" u-m-20 u-reset-button save-btn u-flex-1" @tap="submit">保存</button>
			</view>
		</u-form>

		<!-- 省市区选择器 -->
		<u-select  safe-area-inset-bottom :list="provinceArr" v-model="showProvince"
			@confirm="provinceConfirm"></u-select>
			
		<u-select  safe-area-inset-bottom :list="cityArr" v-model="showCity"
			@confirm="cityConfirm"></u-select>
			
		<u-select  safe-area-inset-bottom :list="areaArr" v-model="showArea"
			@confirm="areaConfirm"></u-select>		
	
		<u-modal show-cancel-button  v-model="deleteTips" :content="tipContent"  @confirm="confirmDel"></u-modal>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				provinceArr:[],//省
				cityArr:[],//市
				areaArr:[],//区
				showProvince: false, //省
				showCity: false, //市
				showArea: false, //区
				addressId: '', //收货地址ID
				labelStyle: {
					'font-size': '28rpx',
					'font-weight': '600',
					color: '#595959'
				},
				model: {
					"name": "", //姓名
					"mobile": "", //联系方式
					"province_id": "", //省
					"city_id": "", //市
					"district_id": "", //区
					"provinceText": "", //省
					"cityText": "", //市
					"areaText": "", //区
					"address": "", //详细地址
					"street": "" ,//镇/街道/县v
					"isdefault": true, //是否设为默认地址 1是  0否
					"full_address" : ''
				},
				rules: {
					mobile: [{
							required: true,
							message: '请输入收货人手机号',
							trigger: ['change', 'blur']
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur']
						}
					],
					name: [{
						required: true,
						message: '请填写收货人姓名',
						trigger: ['change', 'blur']
					}],
					area_text: [{
						required: true,
						message: '请选择地区',
						trigger: ['change', 'blur']
					}],
					address: [{
						required: true,
						message: '请输入详细地址',
						trigger: ['change', 'blur']
					}]
				},
				errorType: ['message'],
				tipContent: '确认删除该地址吗？',
				deleteTips: false,
				
			};
		},
		computed: {},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad({id}) {
			if(id){
				this.addressId = id
				this.getAddressDetail()
			}
			
			uni.setNavigationBarTitle({
				title: this.addressId ? '编辑收货地址' : '添加收货地址'
			});
			this.getAddressColunm(0)
			
		},
		methods: {
			getAddressDetail(){
				this.myHttp({
					url: '/api/memberaddress/info',
					data:{
						id : this.addressId
					}
				}).then(res=>{
					console.log(res.data);
					try{
						Object.assign(this.model,res.data)
						this.model.isdefault = this.model.is_default==1 ? true : false;
						let addressArr = this.model.full_address.split('-')
						this.model.provinceText = addressArr[0]
						this.model.cityText = addressArr[1]
						this.model.areaText = addressArr[2]
						console.log(addressArr);
						this.myHttp({
							url: '/api/address/lists',
							data:{
								pid : this.model.province_id
							}
						}).then(res=>{
								res.data.forEach(item=>{
									let obj = {}
									obj.label = item.name
									obj.value = item.id
									this.cityArr.push(obj)
								})
						})
						this.myHttp({
							url: '/api/address/lists',
							data:{
								pid : this.model.city_id
							}
						}).then(res=>{
								res.data.forEach(item=>{
									let obj = {}
									obj.label = item.name
									obj.value = item.id
									this.areaArr.push(obj)
								})
						})
					}catch(e){
						//TODO handle the exception
					}
				})
			},
			// 选择省
			provinceConfirm(val){
				this.model.province_id = val[0].value
				this.model.provinceText = val[0].label
				this.model.city_id = '',// 	是 	string 	市id
				this.model.district_id = '',	//	是 	string 	区id
				this.model.cityText = '',// 	是 	string 	市id
				this.model.areaText = '',	//	是 	string 	区id
				this.myHttp({
					url: '/api/address/lists',
					data:{
						pid : this.model.province_id
					}
				}).then(res=>{
						res.data.forEach(item=>{
							let obj = {}
							obj.label = item.name
							obj.value = item.id
							this.cityArr.push(obj)
						})
				})
			},
			// 选择市
			cityConfirm(val){
				this.model.city_id = val[0].value
				this.model.cityText = val[0].label
				this.model.district_id = '',	//	是 	string 	区id
				this.model.areaText = '',	//	是 	string 	区id
				this.myHttp({
					url: '/api/address/lists',
					data:{
						pid : this.model.city_id
					}
				}).then(res=>{
						res.data.forEach(item=>{
							let obj = {}
							obj.label = item.name
							obj.value = item.id
							this.areaArr.push(obj)
						})
				})
			},
			// 选择区
			areaConfirm(val){
				this.model.district_id = val[0].value
				this.model.areaText = val[0].label
				this.model.full_address = `${this.model.provinceText}-${this.model.cityText}-${this.model.areaText}`
				
			},
			getAddressColunm(_pid) {
				this.myHttp({
					url: '/api/address/lists',
					data:{
						pid : _pid
					}
				}).then(res=>{
					if(_pid==0){
						res.data.forEach(item=>{
							let obj = {}
							obj.label = item.name
							obj.value = item.id
							this.provinceArr.push(obj)
						})
					}
				})
			},

			// 提交
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if(!this.model.provinceText){
							return uni.showToast({
								    title : '请选择省',
								    duration: 3000,
									icon: 'none'
								});
						}
						if(!this.model.cityText){
							return uni.showToast({
								    title : '请选择市',
								    duration: 3000,
									icon: 'none'
								});
						}
						if(!this.model.areaText){
							return uni.showToast({
								    title : '请选择区',
								    duration: 3000,
									icon: 'none'
								});
						}
						console.log('验证通过');
						let data = {
							name : this.model.name,	//测试 	是 	string 	姓名
							mobile : this.model.mobile, 	//是 	string 	手机号
							telephone : '',		//是 	string 	联系电话
							province_id: this.model.province_id, 	//110000 	是 	string 	省id
							city_id : this.model.city_id,	//110100 	是 	string 	市id
							district_id : this.model.district_id,	//110101 	是 	string 	区id
							community_id :'',	//0 	是 	string 	镇id
							address : this.model.address,	//231231 	是 	string 	详细地址
							full_address: this.model.full_address, 	//北京市-北京市-东城区 	是 	string 	完整地址
							latitude : 0,	 //0 	是 	string 	坐标
							longitude : 0,	//0 	是 	string 	坐标
							is_default 	: this.model.isdefault ? 1 : 0,//1 	是 	string 	是否默认(0否1是)
							type  : '1', //是 	string 	类型，默认传1
							id: this.addressId,
						}
						let url = this.addressId ? '/api/memberaddress/edit' : '/api/memberaddress/add'
						this.myHttp({
							url,
							data
						}).then(res=>{
							if(res.code==0){
								let title = this.addressId ? '编辑成功' : '新增成功'
								uni.showToast({
								    title,
								    duration: 3000,
								});
								this.goBack()
							}
						})
					} else {
						console.log('验证失败');
						return
					}
				});
				
				

			},
			// 删除收货地址
			deleteAddress() {
				this.deleteTips = true

			},
			confirmDel(){
				let url = '/api/memberaddress/delete' 
				this.myHttp({
					url,
					data:{
						id : this.addressId,
					}
				}).then(res=>{
					if(res.code==0){
						let title = '删除成功'
						uni.showToast({
						    title,
						    duration: 3000,
						});
						this.goBack()
					}
				
				})
				
			},
		}
	};
</script>

<style lang="scss">
	// 点击定位
	.location-item {
		font-size: 28rpx;

		font-weight: 500;
		background-color: #fff;
		color: rgba(167, 111, 13, 1);
	}

	// 表单
	.address-box {
		background-color: #fff;
		padding: 0 30rpx;
	}

	.address-item {
		height: 96rpx;
		background: #fff;
		border-bottom: 1rpx solid rgba(#dfdfdf, 0.5);
		padding: 0 25rpx;

		.item-title {
			color: #333;
			font-size: 28rpx;
			white-space: nowrap;
		}

		.inp {
			color: #333;
			font-size: 28rpx;
		}
	}

	.area-box {
		min-height: 120rpx;
		padding-bottom: 60rpx;
		background: #fff;
		padding: 30rpx 25rpx;

		.item-title {
			font-size: 28rpx;
			line-height: 28rpx;
			vertical-align: middle;
			white-space: nowrap;
		}

		.area-inp {
			color: #333;
			font-size: 28rpx;
			vertical-align: middle;
			margin-top: 8rpx;
			width: 550rpx;
		}
	}

	.default-box {
		height: 100rpx;
		padding: 0 25rpx;
		background: #fff;
		margin-top: 20rpx;

		.title {
			font-size: 28rpx;
		}

		.switch {
			transform: scale(0.8);
		}
	}

	// 底部按钮
	.foot_box {
		.delete-btn {
			line-height: 70rpx;
			background: $themeColor;
			box-shadow: 0px 7rpx 6rpx 0px rgba(#ed3c30, 0.22);
			font-size: 28rpx;

			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			border-radius: 35rpx;
			padding: 0;
			margin-right: 20rpx;
		}

		.save-btn {
			line-height: 70rpx;
			background: $themeColor;
			border: 1rpx solid rgba(238, 238, 238, 1);
			border-radius: 40rpx;
			color: rgba(#fff, 0.9);
		}
	}
</style>
